<template>
  <div class="detail-step">
    <!-- 不同订单取消在不同位置 -->
    <XtxSteps :active="order.orderState===6?activeIndex:order.orderState">
      <XtxStepsItem title="提交订单" :desc="order.createTime" />
      <XtxStepsItem title="付款成功" :desc="order.payTime" />
      <XtxStepsItem title="商品发货" :desc="order.consignTime" />
      <XtxStepsItem title="确认收货" :desc="order.endTime" />
      <XtxStepsItem title="订单完成" :desc="order.evaluationTime" />
    </XtxSteps>
  </div>
</template>

<script>
import { computed } from 'vue'

export default {
  name: 'DetailStep',
  props: {
    order: {
      type: Object,
      default: () => ({})
    }
  },
  setup(props) {
    // 区别不同位置取消订单
    const activeIndex = computed(() => {
      if (!props.order.createTime) return 0
      else if (!props.order.payTime) return 1
      else if (!props.order.consignTime) return 2
      else if (!props.order.endTime) return 3
      else if (!props.order.evaluationTime) return 4
      else return 5
    })
    return { activeIndex }
  }
}
</script>

<style scoped lang="less">
.detail-step {
  padding: 20px;
}
</style>
